<template>
  <view class="dashboard-container">
    <!-- 顶部信息区域 -->
    <view class="header-section">
      <view class="header-top">
        <text class="current-time">{{ currentTime }}</text>
        <view class="admin-info">
          <text class="admin-text">管理员</text>
          <view class="admin-avatar">
            <text class="avatar-icon">👤</text>
          </view>
        </view>
      </view>
      
      <!-- 主标题 -->
      <view class="main-title">起重机智能安全保障平台</view>
    </view>

    <!-- 功能模块网格 -->
    <view class="modules-grid">
      <view class="module-card module-running" @tap="navigateToModule('running')">
        <view class="module-icon">📊</view>
        <text class="module-text">运行数据</text>
      </view>
      
      <view class="module-card module-status" @tap="navigateToModule('status')">
        <view class="module-icon">🔧</view>
        <text class="module-text">状态数据</text>
      </view>
      
      <view class="module-card module-maintenance" @tap="navigateToModule('maintenance')">
        <view class="module-icon">⚙️</view>
        <text class="module-text">基础运维</text>
      </view>
      
      <view class="module-card module-message" @tap="navigateToModule('message')">
        <view class="module-icon">🔔</view>
        <text class="module-text">消息中心</text>
      </view>
      
      <view class="module-card module-report" @tap="navigateToModule('report')">
        <view class="module-icon">📋</view>
        <text class="module-text">报表中心</text>
      </view>
      
      <view class="module-card module-system" @tap="navigateToModule('system')">
        <view class="module-icon">⚙️</view>
  <text class="module-text">生产调度</text>
      </view>
    </view>

    <!-- 内容详情区域 -->
    <view class="content-details">
      <view class="content-title">内容详情</view>
      
      <view class="welcome-section">
        <text class="welcome-text">欢迎使用起重机智能安全保障平台。在此区域可以查看各类详细信息，如设备运行报告、维护记录等。</text>
      </view>

      <!-- 设备状态摘要 -->
      <view class="detail-section">
        <view class="section-header">
          <text class="section-title">设备状态摘要</text>
        </view>
        <text class="section-content">当前系统监控中的起重机共12台，其中10台正常运行，2台处于维护状态。今日已完成3次例行检查，未发现重大安全隐患。</text>
      </view>

      <!-- 最近告警信息 -->
      <view class="detail-section">
        <view class="section-header">
          <text class="section-title">最近告警信息</text>
        </view>
        <view class="alert-list">
          <view class="alert-item">
            <text class="alert-number">1.</text>
            <text class="alert-text">起重机#5 于08:32 出现轻微过载告警，已自动调整负载。</text>
          </view>
          <view class="alert-item">
            <text class="alert-number">2.</text>
            <text class="alert-text">起重机#8 于14:15 传感器通讯中断，已派维护人员处理。</text>
          </view>
        </view>
      </view>

      <!-- 维护计划 -->
      <view class="detail-section">
        <view class="section-header">
          <text class="section-title">维护计划</text>
        </view>
        <view class="maintenance-list">
          <view class="maintenance-item">
            <text class="maintenance-bullet">•</text>
            <text class="maintenance-text">起重机#3计划于明日进行月度维护</text>
          </view>
          <view class="maintenance-item">
            <text class="maintenance-bullet">•</text>
            <text class="maintenance-text">起重机#7需更换液压系统滤芯</text>
          </view>
          <view class="maintenance-item">
            <text class="maintenance-bullet">•</text>
            <text class="maintenance-text">所有设备将在本周五进行安全系统升级</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTime: ''
    }
  },
  onLoad() {
    this.updateTime()
    // 每秒更新时间
    setInterval(this.updateTime, 1000)
  },
  methods: {
    updateTime() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')
      const seconds = String(now.getSeconds()).padStart(2, '0')
      this.currentTime = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`
    },
    navigateToModule(module) {
      console.log('导航到模块:', module)
      // 这里可以根据需要添加页面跳转逻辑
      uni.showToast({
        title: `进入${module}模块`,
        icon: 'none'
      })
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #0a0e1a 0%, #1a1f2e 100%);
  background-image: 
    linear-gradient(rgba(40, 50, 70, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 50, 70, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  color: #ffffff;
  padding: 20rpx;
  box-sizing: border-box;
}

/* 头部区域 */
.header-section {
  margin-bottom: 40rpx;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.current-time {
  font-size: 28rpx;
  color: #ffffff;
  font-weight: 500;
}

.admin-info {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.admin-text {
  font-size: 28rpx;
  color: #ffffff;
}

.admin-avatar {
  width: 60rpx;
  height: 60rpx;
  background: linear-gradient(135deg, #4ade80, #22c55e);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(74, 222, 128, 0.3);
}

.avatar-icon {
  font-size: 32rpx;
  color: #ffffff;
}

.main-title {
  font-size: 48rpx;
  font-weight: bold;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
  margin-bottom: 20rpx;
}

/* 功能模块网格 */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  margin-bottom: 40rpx;
}

.module-card {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
  border-radius: 16rpx;
  padding: 30rpx 20rpx;
  text-align: center;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.module-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.module-card:active::before {
  opacity: 1;
}

.module-card:active {
  transform: scale(0.98);
}

.module-icon {
  font-size: 50rpx;
  margin-bottom: 12rpx;
  display: block;
  filter: brightness(1.2);
}

.module-text {
  font-size: 28rpx;
  color: #ffffff;
  font-weight: 500;
}

/* 不同模块的渐变背景 */
.module-running {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.2), rgba(30, 136, 229, 0.3));
  border-color: rgba(33, 150, 243, 0.5);
  box-shadow: 0 8rpx 24rpx rgba(33, 150, 243, 0.2);
}

.module-status {
  background: linear-gradient(135deg, rgba(156, 39, 176, 0.2), rgba(142, 36, 170, 0.3));
  border-color: rgba(156, 39, 176, 0.5);
  box-shadow: 0 8rpx 24rpx rgba(156, 39, 176, 0.2);
}

.module-maintenance {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(69, 160, 73, 0.3));
  border-color: rgba(76, 175, 80, 0.5);
  box-shadow: 0 8rpx 24rpx rgba(76, 175, 80, 0.2);
}

.module-message {
  background: linear-gradient(135deg, rgba(255, 152, 0, 0.2), rgba(255, 138, 0, 0.3));
  border-color: rgba(255, 152, 0, 0.5);
  box-shadow: 0 8rpx 24rpx rgba(255, 152, 0, 0.2);
}

.module-report {
  background: linear-gradient(135deg, rgba(63, 81, 181, 0.2), rgba(57, 73, 171, 0.3));
  border-color: rgba(63, 81, 181, 0.5);
  box-shadow: 0 8rpx 24rpx rgba(63, 81, 181, 0.2);
}

.module-system {
  background: linear-gradient(135deg, rgba(233, 30, 99, 0.2), rgba(216, 27, 96, 0.3));
  border-color: rgba(233, 30, 99, 0.5);
  box-shadow: 0 8rpx 24rpx rgba(233, 30, 99, 0.2);
}

/* 内容详情区域 */
.content-details {
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 40rpx;
  border: 1rpx solid rgba(226, 232, 240, 0.5);
}

.content-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #374151;
  margin-bottom: 24rpx;
}

.welcome-section {
  margin-bottom: 40rpx;
}

.welcome-text {
  font-size: 26rpx;
  color: #6b7280;
  line-height: 1.6;
}

.detail-section {
  margin-bottom: 40rpx;
}

.detail-section:last-child {
  margin-bottom: 0;
}

.section-header {
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #f97316;
}

.section-content {
  font-size: 26rpx;
  color: #374151;
  line-height: 1.6;
}

.alert-list {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12rpx;
  padding: 20rpx;
}

.alert-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #e5e7eb;
}

.alert-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.alert-number {
  font-size: 28rpx;
  color: #f97316;
  font-weight: bold;
  margin-right: 12rpx;
  min-width: 40rpx;
}

.alert-text {
  font-size: 26rpx;
  color: #374151;
  line-height: 1.5;
  flex: 1;
}

.maintenance-list {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12rpx;
  padding: 20rpx;
}

.maintenance-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16rpx;
}

.maintenance-item:last-child {
  margin-bottom: 0;
}

.maintenance-bullet {
  font-size: 32rpx;
  color: #22c55e;
  margin-right: 12rpx;
  margin-top: 4rpx;
}

.maintenance-text {
  font-size: 26rpx;
  color: #374151;
  line-height: 1.5;
  flex: 1;
}
</style>
